<template>
  <div style="text-align:center">
    <p style="padding-top: 30px;
    font-size: 25px;
    color: #aaa;">
      请登录
    </P>
    <x-icon type="ios-contact" size="150" style="color:#ccc;opacity: 0.3;"></x-icon>

    <div style="margin: 0px 60px;">
      <form class="ui-form">
        <div class="ui-view">
          <input type="text" placeholder="工  号" class="ui-input-inner" v-model="user.code">
          <!---->
          <!---->
        </div>

        <div class="ui-view">
          <input type="password" placeholder="登录密码" maxlength="20" class="ui-input-inner" v-model="user.pass">
          <!---->
          <!---->

        </div>
        <button type="button" class="ui-button" @click="haha">
          <!---->
          <!---->
          <span>登录</span>
        </button>
      </form>
    </div>
    <toast v-model="warn" type="warn">{{msg}}</toast>
  </div>
</template>

<script>
import { Toast } from "vux";

import axios from "axios";
export default {
  components: {
    Toast
  },
  data() {
    return {
      user: {
        code: "",
        pass: ""
      },
      warn: false,
      msg: ""
    };
  },
  methods: {
    async haha() {
      if (!this.user.code) {
        this.msg = "请输入工号";
        this.warn = true;
      } else if (!this.user.pass) {
        this.msg = "请输入密码";
        this.warn = true;
      }
      let usr = await this.$store.dispatch("login", this.user);
      if (usr) {
        let temp = await this.$store.dispatch("getJurisdiction", usr);
        if (temp) {
          this.$store.commit("saveinfo", {
            user: usr,
            jursidiction: temp.jursidiction,
            role: temp.role,
            deviceList: temp.deviceList
          });

          this.user.pass = "";
          this.user.code = "";
          this.$router.push("/");
          this.$router.push(this.$route.query.redirect);
        }
      } else {
        this.msg = "用户密码错误";
        this.warn = true;
      }
    }
  }
};
</script>
<style scoped>
.ui-view {
  border-bottom: 1px solid #ebebeb;
}

.ui-input-inner {
  background-color: inherit;
  -webkit-appearance: none;
  box-sizing: border-box;
  font-size: 0.9em;
  height: 2.7em;
  border-radius: 8px;
  border: 1px solid #fef9fb;
  color: #6a6f77;
  display: block;
  outline: 0;
  padding: 0 1em;
  text-decoration: none;
  width: 100%;
}

.ui-button {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  line-height: 2.5555556;
  cursor: pointer;
  line-height: 2.75555556;
  background: #f8f8f8;
  border: 1px solid #c0ccda;
  color: #1f2d3d;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  -webkit-appearance: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(192, 204, 218, 0.3);
  margin: 6px 0;
  text-align: center;
  padding: 0 15px;
  font-size: 14px;
  border-radius: 4px;
  color: #f8f8f8;
  background-color: #39f;
  border-color: #39f;
  -webkit-tap-highlight-color: rgba(51, 153, 255, 0.1);
  width: 180px;
  margin-top: 40px;
}
</style>

